<!doctype html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>图片库 · Generated / Finished</title>
    <link rel="stylesheet" href="/static/style.css" />
    <style>
      .tabs { display: flex; gap: 8px; margin: 0 0 12px; }
      .tab { padding: 8px 12px; border: 1px solid #e5e7eb; border-radius: 999px; background: #f3f4f6; color: #111; text-decoration: none; font-weight: 600; }
      .tab.active { background: #111827; color: #fff; border-color: #111827; }
      .filename { font-size: 12px; color: #555; word-break: break-all; }
      .actions { display: flex; gap: 8px; margin-top: 6px; }
      .actions a { font-size: 12px; color: #0369a1; text-decoration: none; }
    </style>
  </head>
  <body>
    <header>
      <h1>图片库</h1>
      <nav class="nav">
        <a href="/ark" class="{{ 'active' if (active_nav or '') == 'ark' else '' }}">火山SDK调用</a>
        <a href="/images" class="{{ 'active' if (active_nav or '') == 'images' else '' }}">图片库</a>
      </nav>
      <p class="sub">浏览与下载图片（<code>/static/generated</code>）</p>
    </header>

    <main>
      <section class="panel">
        <div class="tabs">
          <a class="tab {% if active_tab == 'generated' %}active{% endif %}" href="/images?tab=generated">generated ({{ active_count if active_tab == 'generated' else other_count }})</a>
        </div>

        {% if images and images|length > 0 %}
        <div class="grid">
          {% for item in images %}
          <figure class="card">
            <img src="{{ item.url }}" alt="{{ item.name }}" loading="lazy" />
            <figcaption>
              <div class="filename">{{ item.name }}</div>
              <div class="actions">
                <a href="{{ item.url }}" target="_blank">新窗口打开</a>
                <a href="{{ item.url }}" download>下载</a>
              </div>
            </figcaption>
          </figure>
          {% endfor %}
        </div>
        {% else %}
        <div class="error">该分类暂无图片</div>
        {% endif %}
      </section>
    </main>

    <div id="lightbox" class="lightbox" aria-hidden="true">
      <button class="lb-close" aria-label="关闭">×</button>
      <img src="" alt="预览图" />
    </div>
    <script src="/static/lightbox.js"></script>
  </body>
  </html>
